<template>
    <popup
        :title="popTitle"
        :show="showEdit"
        :async-close="true"
        confirmButtonText=""
        cancelButtonText=""
        width="1200px"
        @close="emits('close')"
    >
        <div class="p-6">
            <div>
                <el-form :inline="true">
                    <el-form-item>
                        <div class="w-[250px]">
                            <el-input
                                v-model="queryParams.keyword"
                                placeholder="输入文档内容进行搜索"
                            />
                        </div>
                        <div class="w-[110px] ml-2.5">
                            <el-select v-model="queryParams.status" placeholder="全部">
                                <el-option label="全部" value="" />
                                <el-option label="等待学习" value="0" />
                                <el-option label="正在学习" value="1" />
                                <el-option label="学习成功" value="2" />
                                <el-option label="学习失败" value="3" />
                            </el-select>
                        </div>
                        <div class="ml-2.5">
                            <el-button type="primary" @click="resetPaging">查询</el-button>
                            <el-button @click="resetParams">重置</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>

            <el-table size="large" :data="pager.lists" v-loading="pager.loading">
                <el-table-column label="文档内容" prop="question">
                    <template #default="{ row }">
                        <div class="line-clamp-3">{{ row?.question }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="补充内容" prop="answer">
                    <template #default="{ row }">
                        <div class="line-clamp-3">{{ row?.answer }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="学习状态" prop="status">
                    <template #default="{ row }">
                        <el-tag v-if="row.status === 0" type="info">等待学习</el-tag>
                        <el-tag v-if="row.status === 1" type="primary">正在排队</el-tag>
                        <el-tag v-if="row.status === 2" type="warning">正在学习</el-tag>
                        <el-tag v-if="row.status === 3" type="success">学习成功</el-tag>
                        <el-tag v-if="row.status === 4" type="danger">学习失败</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="消耗积分" prop="use_points" />
                <el-table-column label="消耗Tokens" prop="use_tokens" />
                <el-table-column label="最后更新时间" prop="update_time" />
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="{ row }">
                        <el-button type="primary" link @click="handleView(row)">查看</el-button>
                        <el-button type="danger" link>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="flex justify-end mt-4">
                <paging v-model="pager" @change="queryLists" />
            </div>
        </div>
    </popup>

    <pop-data-view
        v-if="dataState.show"
        :show="dataState.show"
        :uuid="dataState.uuid"
        @close="dataState.show = false"
    />
</template>

<script setup lang="ts">
import { usePaging } from '@/hooks/usePaging'
import knowDatasetApi from '@/api/agent/know/dataset'
import PopDataView from './_pop_data_view.vue'

const emits = defineEmits(['close'])

const showEdit = ref<boolean>(false)
const showMode = ref<string>('dataset')
const popTitle = ref<string>('')

const dataState = reactive({
    uuid: '',
    show: false
})

// 搜索参数
const queryParams: any = reactive({
    archive_id: 0,
    keyword: '',
    status: ''
})

// 分页查询
const { pager, queryLists, resetParams, resetPaging } = usePaging({
    fetchFun: knowDatasetApi.lists,
    params: queryParams
})

/**
 * 查看详情
 *
 * @param row
 */
const handleView = (row: any) => {
    dataState.uuid = row.id
    dataState.show = true
}

/**
 * 打开表单
 *
 * @param {string} type
 * @param {any} row
 * @returns {Promise<void>}
 */
const open = async (type: string, row?: any): Promise<void> => {
    showMode.value = type
    showEdit.value = true

    popTitle.value = '训练数据 (' + row.name + ')'
    queryParams.archive_id = row.id
    await queryLists()
}

defineExpose({
    open
})
</script>
